<template>
	<view class="uni-navbar">
		<view class="uni-navbar__content">
			<uni-status-bar v-if="statusBar" />
			<view id="serchBlock" class="search-block">
				<view class="search_block_wrapper">
					<view class="all-content">
						<view class="all-content-box">
							<view class="advater" style="background-image: url(../../static/img/advater.jpg);">
							</view>
							<view class="location" @tap="getLocation">
								<view class="location-loc">{{this.city}}</view>
								<view class="location-t">晴 12℃</view>
							</view>
							<view class="search"></view>
							<view class="scan"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";
	import uniIcons from "../uni-icons/uni-icons.vue";
	export default {
		name: "UniNavBar",
		data() {
			return{
				visible: false,
				city:'',
				location:''
			}
		},
		components: {
			uniStatusBar,
			uniIcons
		},
		props: {
			statusBar: {
				type: [Boolean, String],
				default: false
			},
			fixed: {
				type: [Boolean, String],
				default: false
			}
		},
        mounted() {
			uni.getLocation({
				//默认wgs84返回gps坐标
				//gcj02返回国测局坐标,可以用于uni.openLocation的坐标
				type: 'wgs84',
				//解析地址
				geocode: true,//中文
				success: (data) => {
					console.log(data)
					console.log(data.address)
					if (data.address) {
						this.location = data
						this.city = data.address.city
					}
				},
				fail: (err) => {
					console.log(err)
					// this.$api.msg('获取位置失败!')
				}
			});
        },
		methods: {
			getLocation(){
				uni.navigateTo({
					url:"../../pages/location/location"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.uni-navbar {
		width: 750rpx;
	}
	.uni-navbar__content {
		position: fixed;
		width: 750rpx;
	}
	.search-block {
		width: 100%;
		height: 80rpx;
		position: fixed;
		z-index: 300;
	}
	.search_block_wrapper {
	    position: relative;
		box-sizing: border-box;
		height: 80rpx;
	    z-index: 301;
		background-color: #ff433e;
	}
	.all-content {
		width: 100%;
		height: 100%;
		padding: 8rpx 20rpx;
		.all-content-box{
			display: flex;
			height: 100%;
			align-items: center;
			.advater{
				width: 70rpx;
				height: 70rpx;
				border-radius: 40rpx;
				background-size: cover;
			}
			.location {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #fff;
				.location-t{
					font-size: 22rpx;
				}
			}
		}
	}
	
</style>
